<template>
    <div class="content">
        <!-- <HeaderNav></HeaderNav> -->
        <div class="flex-between">
            <div class="progress-box">
                <span>下载总进度</span>
                <el-progress 
                    :percentage=50 
                    color="#00CCCC" 
                    :stroke-width=15
                >
                </el-progress>
            </div>
            <div class="flex-between">
                <el-button style="margin-right: 30px;" class="topbtn">全部暂停</el-button>
                <el-button class="topbtn">全部取消</el-button>
            </div>
        </div>
        <div class="list-content">
            <div>正在下载（0/3）</div>
            <el-table :data="tableData" style="width:100%" :show-header="false">
                <el-table-column>
                    <template slot-scope="scope">
                        <div class="flex-left-center">
                            <img src="../../assets/imgs/file3.png">
                            <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="downloadNumber">
                    <template slot-scope="scope">
                        <div class="flex-left-center">
                            <span style="margin-right: 20px">sss/sss</span>
                            <el-progress :percentage="scope.row.percent" color="#00CCCC" :stroke-width=10  :show-text="false"></el-progress>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="date" width="200">
                    <template slot-scope="scope">
                        <el-button @click="downLoadFile(scope.row)" type="text" style="color:#999999;">暂停</el-button>
                        <el-button @click="downLoadFile(scope.row)" type="text" style="color:#999999;">取消</el-button>
                        <el-button @click="downLoadFile(scope.row)" type="text" style="color:#999999;">打开</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <div>{{$store.state.hello}}</div> -->
    </div>
</template>

<script>
// import STORE from '@/store'

export default{
    name: 'DownloadView',
    data() {
        return {
            queryFileName: '',
            pageNum: 1,
            pageSize: 10,
            listLength: 0,
            tableData: [
                {fileName: 'hhhaaaaaaaaaaaaaaaaaaaa',percent: 13},
                {fileName: 'hhhaaaaarrr',percent: 63},
            ]
        }
    },
    created() {
        console.log("🌸 >> created >> 1", this.$store.state.test.name)
        this.$store.commit('changeName','55555')
        console.log("🌸 >> created >> 2", this.$store.state.test.name)
        
    }
}
</script>

<style lang="less" scoped>
.content {
    margin: 3.1%;
    .el-input {
        width: 515px;
        margin-right: 7%;
    }
    .list-content {
        margin-top: 30px;
        img {
            width: 18px;
            height: 18px;
            // line-height: 30px;
        }
    }
}
.progress-box {
    width: 80%;
    .el-progress {
        margin-left: 2%;
        width: 80%;
        display: inline-block;
    }
}
:deep(.el-button.topbtn:focus), 
:deep(.el-button.topbtn:hover) {
    background:  #00CCCC !important;
    border-color: #00CCCC !important;
    color: #FFF !important;
}
:deep(.el-progress-bar__outer) {
    background-color: #CCCCCC;
    border-radius: 0%;
}
:deep(.el-progress-bar__inner) {
    border-radius: 0%;
}
.el-button.topbtn {
    border: solid 1px #ffffff !important;
}

.list-content >div:first-child {
    font-size: 12px;
    color: #999999;
    margin-bottom: 20px;
}
.list-content {
    .el-progress {
        margin-left: 2%;
        width: 120px;
        display: inline-block;
    }
}

</style>
